<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>订单管理</title>
    <!-- 导入样式 -->
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
 	<!-- 导入 jquery -->
 	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 	
  </head>
  <body>
  	 <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="compatibility">我的购物车数据</a></legend>
     </fieldset>
  	 <!-- 放一个表格容器 -->
 	 <table id="demo"  lay-filter="demo"></table>
  	
  	
  	 <!-- 数据表格工具条 -->
  	 <div id="tools" style="display:none;">
  	 	<button id="quanxuan" class="layui-btn layui-btn-warm layui-btn-xs">全选</button>
  	 	<button id="fanxuan" class="layui-btn layui-btn-xs">反选</button>
  	 	<button id="shanchu" class="layui-btn layui-btn-xs">删除</button>
  	 	<div class="layui-input-inline">
  	 		<input type="text" name="search" class="layui-input" />
  	 	</div>
  	 	<button id="sousuo" class="layui-btn layui-btn-danger layui-btn-xs">搜索</button>
  	 </div>
  
  	 <!-- 表格行工具按钮 -->
  	 <div id="gj" style="display:none;">
  		 <button  class="layui-btn layui-btn-danger layui-btn-xs" 
  		 				 lay-event="del">删除</button>
  	 	 <button  class="layui-btn layui-btn-xs" 
  	 	 				 lay-event="edit">修改</button>
  	 </div>
  
  <!-- 导入layui js依赖 -->
  <script src="https://www.layuicdn.com/layui/layui.all.js"></script>
  </body>
</html>

<script>
//加载table模块
layui.use(['jquery','element','table','form','layer'],function(){
    var table = layui.table ;
    var $ = layui.jquery ;
    var form = layui.form ;
    var layer = layui.layer ;
     
     //创建表格参数
	var obj = {
		elem: '#demo'  //id选择器
	   ,url: '/xiaomi/showMyCart?uid=2&page=1'   //数据接口,某个Controller
	   ,page: true //开启分页
	   ,toolbar:'#tools' //开启头部工具条
	   ,limit:5  //每页显示多少条
	   ,cols: [[ //表头  表格的标题列
	   		{type:'checkbox'}
		   ,{field: 'mid', title: '购物车每一项Id',width:30}
		   ,{field: 'uid', title: '用户id',templet:userShow}
     	   ,{field: 'gid', title: '商品id'}
     	   ,{field: 'gphoto', title: '商品图片',templet:show}
     	   ,{field: 'gname', title: '商品名称'}
     	   ,{field: 'gprice', title: '价格'}
     	   ,{field: 'count', title: '数量'}
     	   ,{toolbar:'#gj'}  //添加行工具
     	   
	   ]] ,
	   
	   done: function (res, curr, count) {
           $(".layui-table-cell").css("color", "#333");
           $(".layui-table-cell").css("height", "90px");
           $(".layui-table-cell").css("line-height", "90px");
           $(".layui-table-cell").css("margin", "0px");
       }
	   
	} ;
	//加载表格
	table.render(obj);
     
    //头工具的事件
    $("#sousuo").click(function(){
    	//得到文本框
    	var name = $("input[name=search]").val();
    	
    	//直接调用表格的reload方法 他会帮你发送ajax请求与拼接表格
    	table.reload('demo',{
    		url:'/xiaomi/showMyCart',
    		where:{'productName':name ,'page':1}
    	});
    	//重新加载页面
    	//window.location.reload(true);
    });
     
     //点击修改按钮的事件
     //监听行工具事件  给表格加上 lay-filter="test"
	table.on('tool(demo)', function(obj){
		 var data = obj.data;  //将行的数据进行赋值
		 if(obj.event === 'del'){ //点了删除按钮
		 	alert(data.id + ","+data.username);   //得到行的数据，发送ajax
		 }else if(obj.event === 'edit'){
		 	//点击行工具修改，将数据加载到表单
		 	
		 }
	});
	
	//监听单击双击事件
	table.on('row(demo)', function(obj){
	 // console.log(obj.tr) //得到当前行元素对象
	  console.log(obj.data.gphoto); //得到当前行数据
	  //obj.del(); //删除当前行
	  //obj.update(fields) //修改当前行数据
	  $("#bigTitle").text(obj.data.gname);
	  $("#bigimg").attr("src",obj.data.gphoto);
	  layer.open({
		 type:1,
		 content:$('#tpck'),
		 area:['800px','800px'],
		 skin:'layui-layer-molv'
	  });
	});

});

function show(row){
	return "<img src='"+row.gphoto+"'/>";
}
function userShow(row){
	if(row.uid=='2'){
		return "张三";
	}
}

</script>

<div id="tpck" style="display: none">
	<h3 id="bigTitle"></h3>
	<img id="bigimg" src=""/>
</div>